<template>
  <div class="app-container">
    <div class="app-container-inner">
      <commonTable
        :loading="loading"
        @selection-change="selectionChange"
        :columns="column"
        :data="list"
        @reset="reset"
        @onSubmit="onSubmit"
      >
        <template v-slot:state="scope">{{ scope.row.state ? '审核通过' : '审核不通过' }}</template>
        <template v-slot:operation="scope">
          <el-button type="primary" size="small" @click="view(scope.row)"> 查看 </el-button>
          <el-button @click="viewRecord(scope.row)" type="primary" size="small">
            查看操作记录
          </el-button>
          <el-button type="primary" plain size="small"> 冻结 </el-button>
          <el-button type="danger" plain size="small"> 关闭 </el-button>
        </template>
      </commonTable>
    </div>
  </div>
</template>
<script setup lang="ts">
  import commonTable from '@/components/commonTable/index.vue'
  const loading = ref(false)
  const rowObj = ref({})
  const selectObj = ref([])
  const data = []
  for (let i = 0; i < 100; i++) {
    data.push({
      cusId: i,
      cusName: '牛婆' + i,
      merchantId: i,
      merchantIdName: '王五' + i,
      submitTime: '20250101',
      proType: i,
      transType: i,
      state: i % 2 === 0 ? true : false,
      payAmount: '$10000',
      payCur: '￥￥￥',
      reason: 'so much money',
    })
  }
  const list = ref([...data])
  const column = [
    { type: 'selection', width: 60, fixed: 'left' },
    { name: 'operation', slot: true, fixed: 'right', width: 350, label: '操作' },
    { name: 'cusId', label: '客户号', inSearch: true, valueType: 'input' },
    { name: 'cusName', label: '客户名', inSearch: true, valueType: 'input' },
    { name: 'merchantId', label: '商户号', inSearch: true, valueType: 'input' },
    { name: 'merchantIdName', label: '商户名称', inSearch: true, valueType: 'input' },
    {
      name: 'submitTime',
      label: '提交时间',
      sorter: true,
      inSearch: true,
      valueType: 'input',
    },
    {
      name: 'proType',
      label: '产品类型',
      inSearch: true,
      valueType: 'input',
      align: 'center',
    },
    {
      name: 'transType',
      label: '交易类型',
      inSearch: true,
      valueType: 'input',
      align: 'center',
    },
    { name: 'state', label: '状态', inSearch: true, valueType: 'input' },
    {
      name: 'payAmount',
      label: '付款金额',
      valueType: 'input',
    },
    {
      name: 'payCur',
      label: '付款币种',
      valueType: 'input',
    },
    {
      name: 'reason',
      label: '原因说明',
    },
  ]
  const selectionChange = (val) => {
    selectObj.value = val
  }
  const view = (row) => {
    console.log('view', row)
  }
  const viewRecord = (row) => {
    console.log('viewRecord', row)
  }
  const reset = () => {
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
    ElMessage.success('触发重置方法')
  }

  const onSubmit = (val) => {
    console.log('val===', val)
    ElMessage.success('触发查询方法')
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
</script>

<style scoped></style>
